<template>
  <div class="contain">
    <NavBar title="申请预约"></NavBar>
    <div class="box">
      <div class="label">选择预约时间(时间段)</div>
      <van-radio-group v-model="bxResult" @change="handleId">
        <div class="card margin" v-for="(item, index) in timeData" :key="index">
          <div class="pro flex-row">
            <van-icon name="clock-o" size="24" color="#0065ff" />
            <div class="pre">
              <p class="pre-t">{{ item.time }}</p>
            </div>
            <van-radio :name="index"></van-radio>
            <!-- <div v-else class="ym-font">已约满</div> -->
          </div>
        </div>
      </van-radio-group>
      <div class="label">填写预约信息</div>
      <div class="card">
        <div class="cell bordr-btm flex-row" v-if="false">
          <p class="l-t">预约人</p>
          <input
            placeholder="填写预约人姓名(必填)"
            type="text"
            v-model="temp.peopleName"
          />
        </div>
        <div class="cell bordr-btm flex-row">
          <p class="l-t">联系电话</p>
          <input
            placeholder="填写联系电话(必填)"
            type="text"
            disabled
            v-model="temp.tel"
          />
        </div>
        <div class="cell bordr-btm flex-row">
          <p class="l-t">参观人数</p>
          <input
            placeholder="参观人数(必填)"
            type="number"
            v-model="temp.enrollNum"
          />
        </div>
        <div class="cell bordr-btm flex-row">
          <p class="l-t">单位名称</p>
          <input
            placeholder="填写单位名称(必填)"
            type="text"
            v-model="temp.yyCompany"
          />
        </div>
        <div class="cell flex-cloum" style="margin-top: 10px">
          <p class="l-t">备注</p>
          <van-field
            class="padding-none"
            v-model="temp.stRemarks"
            rows="2"
            autosize
            type="textarea"
            maxlength="50"
            placeholder="请输入留言"
            show-word-limit
          />
        </div>
      </div>
    </div>
    <van-popup v-model="showPicker" round position="bottom">
      <van-picker
        title="选择人数"
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel"
        @change="onChange"
      />
    </van-popup>
    <ComBtn title="提交预约" @click="sumBit()"></ComBtn>
  </div>
</template>
<script>
import { addYySeeTime } from "@/api/user";
import NavBar from "@/components/NavBar.vue";
import ComBtn from "@/components/ComBtn.vue";
import { mapState } from "vuex";
export default {
  data() {
    return {
      temp: {
        enrollNum: "",
        yyCompany: "",
        stRemarks: "",
      },
      showPicker: false,
      columns: ["1", "2", "3", "4", "5", "6"],
      result: [],
      idData: this.$route.params.id,
      bxResult: "",
      active: 0,
      mustData: [],
      timeData: [],
      groupedData: {},
      YData: [],
      timeStr: "",
    };
  },
  components: {
    NavBar,
    ComBtn,
  },
  computed: {
    ...mapState("user", ["userInfo"]),
  },
  created() {
    this.temp.tel = this.userInfo.mobileNo;
  },
  mounted() {
    this.initDaTe();
  },
  methods: {
    //废弃

    initDaTe() {
      const currentDate = new Date();
      const timeDataArray = [];

      for (let i = 0; i < 3; i++) {
        // 生成当前月份及后面两个月的时间
        const year = currentDate.getFullYear();
        const month = currentDate.getMonth() + 1 + i; // 当前月份加上 i

        // 处理跨年情况
        const newYear = year + Math.floor((month - 1) / 12); // 计算跨年
        const newMonth = (month % 12 === 0 ? 12 : month % 12)
          .toString()
          .padStart(2, "0"); // 处理月份格式，保证两位数

        timeDataArray.push({ time: `${newYear}-${newMonth}` });
      }

      this.timeData = timeDataArray; // 更新组件的时间数据
    },
    handleInputClick() {
      this.showPicker = true;
    },
    onConfirm(value, index) {
      this.showPicker = false;
      this.temp.enrollNum = value;
      console.log(`当前值：${value}, 当前索引：${index}`);
    },
    onChange(picker, value, index) {
      console.log(`当前值：${value}, 当前索引：${index}`);
    },
    onCancel() {},

    handleId(val) {
      this.timeStr = this.timeData[val].time;
    },
    formatDate(date) {
      // 将 YYYY-MM-DD 格式的日期转换为 MM.DD
      const parts = date.split("-");
      return `${parts[1]}.${parts[2]}`;
    },

    findName(e, array) {
      const item = array.find((item) => item.dataCode === e);
      return item ? item.dataName : null;
    },
    findData(e) {
      const item = this.YData.find((item) => item.seeId === e);
      return item || null;
    },
    sumBit() {
      this.$loadingU.show("Please wait...", 10000);
      var reqData = {
        ...this.temp,
        yyUserId: this.userInfo.yyUserId,
        yearMoney: this.timeStr,
      };
      if (reqData.yearMoney === "") {
        this.$toast({
          message: "请选择预约时间段",
        });
        this.$loadingU.hide();
        return;
      }
      if (reqData.enrollNum === "") {
        this.$toast({
          message: "请输入正确的预约人数",
        });
        this.$loadingU.hide();
        return;
      }
      if (reqData.yyCompany === "") {
        this.$toast({
          message: "请输入单位名称",
        });
        this.$loadingU.hide();
        return;
      }
      reqData.enrollNum = String(reqData.enrollNum);
      addYySeeTime(reqData).then((res) => {
        this.$loadingU.hide();
        this.$toast({
          message: res.data.message,
        });
        if (res.data.state === 0) {
          var paramData = {
            ...reqData,
          };
          this.$router.push({
            name: "StateView",
            params: { data: paramData },
          });
        }
      });
    },
  },
  beforeDestroy() {},
};
</script>

<style lang="less" scoped>
.timebox {
  // justify-content: flex-end;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.ym-font {
  color: rgb(252, 85, 49);
  font-weight: 600;
  font-size: 14px;
}
.handle-time-box {
  padding: 3px 15px;
  border-radius: 15px;
  margin: 5px;
  box-sizing: border-box;
  background-color: #0d6efd;
  color: white;
  font-weight: 600;
  font-size: 14px;
  line-height: 25px;
}
/deep/.van-divider {
  margin: 3px;
}
/deep/.van-tabs__line {
  background-color: #0d6efd;
}
.contain {
  padding: 0 0 100px 0;
}
.box {
  padding: 0 16px;
  box-sizing: border-box;
}
.label {
  font-weight: 600;
  font-size: 16px;
  display: flex;
  color: #333333;
  line-height: 26px;
  margin: 15px 0;
  align-items: center;
}
.label::before {
  content: ""; /* 必须的属性，确保伪元素渲染 */
  display: block;
  width: 3px;
  height: 12px;
  margin-right: 5px;
  background-color: #0d6efd;
  border-radius: 8px;
}
.card {
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 9px;
}
input {
  width: 100%;
  text-align: right;
  padding: 16px;
  box-sizing: border-box;
  font-weight: 400;
  font-size: 15px;
  color: #112950;
  border: none;
  outline: none;
  border-bottom: 2px solid transparent;
  background-color: transparent;
  width: 100%;
}
input::placeholder {
  font-weight: 400;
  text-align: right;
  font-size: 15px;
  color: #b2bac6;
  line-height: 22px;
}
.cell {
  min-height: 50px;
  align-items: center;
  justify-content: space-between;
  .l-t {
    font-weight: 400;
    font-size: 16px;
    color: #333333;
    line-height: 23px;
    display: inline-block;
    width: 30%;
  }
  .sub-t {
    font-weight: 400;
    font-size: 15px;
    color: #c3c3c3;
    line-height: 22px;
    align-items: center;
  }
  .have {
    font-weight: 400;
    font-size: 15px;
    color: #333333;
    line-height: 22px;
  }
}
.bordr-btm {
  border-bottom: 1px solid #eaeaea;
}
//项目u部分
.pro {
  width: 100%;
  padding: 10px 0;
  justify-content: space-between;
  img {
    width: 70px;
    height: 70px;
    border-radius: 15px;
    overflow: hidden;
  }
  .pre {
    width: 60%;
    display: flex;
    flex-direction: column;
    .pre-t {
      font-weight: 600;
      font-size: 16px;
      color: #3a3a3a;
      line-height: 25px;
    }
    .pre-sub {
      font-weight: 500;
      font-size: 12px;
      color: #999999;
      line-height: 18px;
    }
  }
}
.margin {
  margin-top: 10px;
}
.padding-none {
  padding: 0 !important;
}
.time {
  text-align: right;
  font-weight: 600;
  font-size: 14px;
  color: #3a3a3a;
  line-height: 25px;
  i {
    color: #0d6efd;
    font-weight: 600;
  }
}
</style>
